﻿@inherits Umbraco.Web.Mvc.UmbracoTemplatePage

@using UmbracoExtending.Dealer
@{
    Layout = "Base.cshtml";

    var provinces = DealerUtil.GetProvinces();
}


<form class="form-horizontal">

    <div class="form-group">
        <label class="col-sm-2 control-label">Province</label>
        <div class="col-sm-10">
            <select class="form-control" id="province">
                <option>=请选择=</option>
                @foreach (var province in provinces)
                {
                    <option value="@province.Code">@province.Name</option>
                }
            </select>
        </div>
    </div>

    <div class="form-group">
        <label class="col-sm-2 control-label">City</label>
        <div class="col-sm-10">
            <select class="form-control" id="city"></select>
        </div>
    </div>
</form>

<table class="table table-condensed">
    <tr>
        <th>编号</th>
        <th>地址</th>
        <th>名称</th>
        <th>负责人</th>
        <th>联系电话</th>
        <th>经纬度</th>
        <th>行政信息</th>
        <th>距离</th>
    </tr>
    <tbody id="dealers"></tbody>
</table>

@section script{
    <script type="text/javascript">
        $(function () {
            $("#province").change(function () {
                $.get("/umbraco/UmbracoDealer/FrontendDistrict/GetCitys", { code: $(this).val() }, function (data) {
                    $("#city").empty().append('<option>=请选择=</option>');
                    $.each(data, function (i, val) {
                        $("#city").append('<option value=' + val.Code + '>' + val.Name + '</option>');
                    });
                    $("#city").unbind().bind("change", function () {
                        getDealers($(this).val());
                    });
                }, "JSON");
            });
        })

        var getDealers = function (code) {
            $.get("/umbraco/UmbracoDealer/FrontendDealer/GetDealers", {
                code: code, page: 1, size: 20
            }, function (data) {
                console.log(data);
                $("#dealers").empty();
                $.each(data.Dealers, function (i, val) {
                    var tr = '<tr>';
                    tr += '<td>' + val.Id + '</td>';
                    tr += '<td>' + val.Address + '</td>';
                    tr += '<td>' + val.StoreName + '</td>';
                    tr += '<td>' + val.ResponsiblePerson + '</td>';
                    tr += '<td>' + val.ContactNumber + '</td>';
                    tr += '<td>' + val.Lat + ',' + val.Lng + '</td>';
                    tr += '<td>' + val.Province + "-" + val.City + "-" + val.District + '</td>';
                    tr += '<td>请等待</td>';
                    tr += '</tr>';
                    $("#dealers").append(tr);
                });
            }, "JSON");
        }
    </script>
}